<!DOCTYPE html>
<html>
<head>
    <title>EN</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
    <meta name="author" content="test">
    <meta name="description" content="test">
    <meta name="copyright" content="ltlwill">
    <meta name="viewport" content="width=device-width;height=device-height;initial-scale=1.0">
    <style>
        *{
            box-sizing:content-box;
        }
    </style>

</head>
<body>
    <div style="padding: 0px;border: double 2px #eee;background: blueviolet;width: 200px;height:200px">
        <img id="img-zoom" onload="load();" class="img-zoom" style=";margin: 0px;padding:0px;min-height: 200px;max-height: 200px;min-width: 200px;max-width: 200px" src="11.jpg"/>
    </div>
    <script>

        function load()
        {
            alert("onload");
        }
        ;(function(win){
            var img = document.getElementById('img-zoom');
            img.addEventListener("mouseover",onMouseOver);
            img.addEventListener("mouseout",onMouseOut);

        })(window);

        function onMouseOver(){
            var realImg = document.createElement("img");
            realImg.src = this.src;
            var maxWidth = 600;
            var maxHeight = 500;
            var pBorderW = parseInt(this.parentNode.style.borderWidth.substring(0,this.parentNode.style.borderWidth.indexOf('px')));
//            alert("realWdith:" + realImg.width + ";realHeight:" + realImg.height + "\r\n" + "width:" + this.width + ";height:" + this.height + ";position:" + this.style.position);
            var div = document.createElement("div");
            div.id = 'img-zoom-div';
            div.style.position = 'absolute';
            div.style.display = 'block';
            div.style.padding = '0px';
            div.style.width = (realImg.width>maxWidth) ? maxWidth : realImg.width + 'px';
            div.style.height = (realImg.height>maxHeight) ? maxHeight : realImg.height + 'px';

            div.style.border = '4px #eee double';
            div.style.zIndex = '999';
            div.style.left = (this.offsetLeft + this.width + pBorderW + 1) + 'px';
//            div.style.backgroundColor = "red";
            div.style.top = (this.offsetTop - pBorderW) + 'px';
            realImg.style.maxWidth = maxWidth + 'px';
            realImg.style.maxHeight = maxHeight + 'px';
            realImg.style.margin = '0px';
            div.appendChild(realImg);

            document.body.appendChild(div);


        }

        function onMouseOut()
        {
            document.body.removeChild(document.getElementById('img-zoom-div'));
        }
    </script>
</body>
</html>